<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>新增会员</text>
			</view>
		</view>
		<view class="tui-top" :style="{marginTop:(45+top)+'px'}">
			<view class="mycard">
				<view class="tui-addr-box">
					<form :report-submit="true">
						<!-- 姓名 -->
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title">姓名 <text style="color: #FF0000;">*</text></view>
								<input @input="inputname" placeholder-class="tui-phcolor" :value="param.username" class="tui-input" name="name" placeholder="请输入姓名" maxlength="25" type="text" />
							</view>
						</tui-list-cell>
						<!-- 手机号 -->
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title" >手机号码<text style="color: #FF0000;">*</text></view>
								<input @input="inputmobile" :value="param.mobile" placeholder-class="tui-phcolor" class="tui-input" name="mobile" placeholder="请输入收货人手机号码" maxlength="11"
								 type="text" />
							</view>
						</tui-list-cell>
						<!-- 微信 -->
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title" >微信</view>
								<input @input="inputwx" :value="param.wx" placeholder-class="tui-phcolor" class="tui-input" name="wx" placeholder="请输入微信名" maxlength="25"
								 type="text" />
							</view>
						</tui-list-cell>
						<!-- 性别 -->
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell"  style="justify-content: space-between;">
								<view class="tui-title" >性别</view>
								<radio-group @change="radioChange" style="float: right;">
									<label class="radio" @change >
										<radio value="0" color="#FF0000" style="zoom:0.65"/><text>女</text>
										<radio value="1" color="#FF0000" style="zoom:0.65;margin-left: 30upx;"/><text>男</text>
									</label>
								</radio-group>
							</view>
						</tui-list-cell>
						<!-- 生日 -->
						<tui-list-cell :arrow="true" padding="0" @click="showChooseDate()">
							<view class="tui-line-cell" >
								<view class="tui-title" >生日</view>
								<input placeholder-class="tui-phcolor"  class="tui-input" :value="param.brithday" disabled name="brithday" placeholder="请选择" maxlength="50" type="text" />								
								</view>
						</tui-list-cell>
						<!-- 顾问 -->
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title" >专属顾问</view>
								<input :value="myinfo.nickname" placeholder-class="tui-phcolor" class="tui-input" disabled
								 type="text" />
							</view>
						</tui-list-cell>
						<!-- 来源 -->
						<tui-list-cell :arrow="true" padding="0" @click="showChooseFrom">
							<view class="tui-line-cell">
								<view class="tui-title" >会员来源</view>
								<input :value="userfrom" disabled class="tui-input" disabled type="text" />
							</view>
						</tui-list-cell>
						<!-- 地区 -->
						<tui-list-cell :arrow="true" padding="0" @click="showChooseCity">
							<view class="tui-line-cell">
								<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
								<input placeholder-class="tui-phcolor" class="tui-input" style="font-size: 24upx;" :value="cityString" disabled name="city" placeholder="请选择城市" maxlength="50" type="text" />
							</view>
						</tui-list-cell>
						<!-- 默认地址 -->
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title">详细地址</view>
								<input @input="inputaddr" :value="param.addr" placeholder-class="tui-phcolor" class="tui-input" name="address" placeholder="请输入详细的收货地址" maxlength="50" type="text" />
							</view>
						</tui-list-cell>
						<!-- 备注 -->
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title" >备注</view>
								<input @input="inputMemo" :value="param.memo" placeholder-class="tui-phcolor" class="tui-input" name="memo" placeholder="请输入备注内容" maxlength="200"
								 type="text" />
							</view>
						</tui-list-cell>
						<!-- 保存地址 -->
						<view class="tui-addr-save">
							<tui-button shadow type="danger" height="99rpx" shape="circle" @click="save" :disabled="!saveBtnStatus">保存会员信息</tui-button>
						</view>
					</form>
					<tui-datetime :type="2" ref="dateTime" @confirm="changeDate"></tui-datetime>
					<tui-bottom-popup :show="popup" backgroundColor="transparent" @close="close">
						<view class="tui-header">
							<view>选择城市</view>
							<icon type="clear" :size="16" color="#c0c0c0" class="tui-icon-close" @tap="close"></icon>
						</view>
						<tui-cascade-selection :size="26" :textSize="24" :itemList="city" :reset="reset" request @change="nextCity" :receiveData="citylist" @complete="chooseCity"></tui-cascade-selection>
					</tui-bottom-popup>
					<tui-actionsheet  
					  :show="showActionSheet" 
					  :item-list="itemList" 
					  @click="chooseFromitemClick" 
					  @cancel="showActionSheet=false"
					  color="#ff0000">
					</tui-actionsheet>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	const cityData = require('@/common/city.js');
	export default {
		data() {
			return {
				id:0,
				reset:0,
				setting:{},
				param:{
					province_cn:'',
					city_cn:'',
					county_cn:'',
					street_cn:'',
					status:1,
					brithday:'',
					from:'线上',
					sex:1,
					},
				myinfo:{},
				popup:false,
				city:cityData,
				saveBtnStatus:true,
				delBtnStatus:false,
				citylist:[],
				cityString:'',
				userfrom:'线上',
				showActionSheet:false,
				itemList:[]
			};
		},
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow() {
			this.getMyinfo();
			this.getSetting();
		},
		methods: {
			href(type) {
				if(type==1){
					this.tui.href('../notice/notice');
				}else{
					this.tui.toast("功能开发中~")
				}
			},
			back(){
				uni.navigateBack({
					
				})
			},
			getMyinfo(){
				this.tui.get('user/api/getuser').then(res=> {
					if (res.code == 1) {
						this.myinfo = res.data;
					}
				})
			},
			getSetting(){
				this.tui.get('user/Setting/memberSetting').then(res=> {
					if (res.code == 1) {
						this.setting = res.data;
						this.itemList = this.setting.member_form.map((item,idx)=>{
							return {text: item,color: "#2B2B2B",val:idx};
						})
					}
				})
			},
			changeStatus:function(event){
				// console.log(event.detail.value);
				this.param.status = event.detail.value?1:0;
			},
			inputname:function(event){
				this.param.username = event.detail.value;
			},
			inputaddr:function(event){
				this.param.addr = event.detail.value;
			},
			inputmobile:function(event){
				this.param.mobile = event.detail.value;
			},
			inputwx:function(event){
				this.param.wx = event.detail.value;
			},
			inputMemo(event){
				this.param.memo = event.detail.value;
			},
			showChooseCity(){
				this.popup =true;
			},
			showChooseDate(){
				this.$refs.dateTime.show();
			},showChooseFrom(){
				this.showActionSheet =true;
			},
			chooseFromitemClick(e){
				// console.log(e);
				// console.log(this.itemList[e.index].text);
				let index = e.index;
				this.param.from = this.itemList[index].text;
				this.userfrom = this.itemList[index].text;
				this.showActionSheet = false;
			},
			changeDate(val){
				// this.param.brithday = val.year +'-'+val.month+'-'+val.day;
				this.param.brithday = val.result;
			},
			getAddr(){
				if(this.id){
					this.delBtnStatus=true;
					let it =this;
					this.param.id = this.id;
					this.tui.get('member/api/getaddr/id/'+this.id).then(function(res){
						if(res.code ==1){
							it.param = res.data;
							it.createCityString()
						}else{
							uni.navigateBack();
						}
					})
				}
			},
			chooseCity(e) {
				// this.tui.toast('您选择的数据为：' + e.text);
				// console.log(e);
				this.param.province_cn = e.result[0].text
				this.param.province_id = e.result[0].value
				this.param.city_cn = e.result[1].text
				this.param.city_id = e.result[1].value
				this.param.county_cn = e.result[2].text
				this.param.county_id = e.result[2].value
				this.param.street_cn = e.result[3].text
				this.param.street_id = e.result[3].value
				this.close();
				this.createCityString();
				setTimeout(() => {
					//重置数据
					this.reset++;
				}, 300);
			},
			createCityString(){
				this.cityString = this.param.province_cn +' '+ this.param.city_cn+' '+this.param.county_cn+' '+this.param.street_cn
			},
			nextCity(e){
				if(e.layer >-1){
					this.tui.get('user/api/nextcity/code/'+e.value).then(res=>{
						this.citylist = res.data;
					});
				}
			},
			close() {
				this.popup = false;
			},
			save(){
				let it =this;
				this.saveBtnStatus =0;
				this.tui.post('user/api/savemember',this.param).then(function(res){
					// console.log(res);
					it.tui.toast(res.msg);
					if(res.code ==1){
						it.saveBtnStatus =false;
						uni.navigateBack();
					}else{
						it.saveBtnStatus =true;
					}
					
					
				});
			},
			radioChange(e){
				console.log(e.detail.value);
				this.sex =e.detail.value;
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding:20rpx 0 48rpx;
	}
	.tui-addr-box {
		padding: 20rpx 0;
	}
	
	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}
	
	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}
	
	.tui-input {
		width: 500rpx;
	}
	input{text-align: right;padding-right: 30rpx;}
	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}
	
	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}
	
	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}
	.tui-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	.tui-icon-close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}	
	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}
	
	.tui-del {
		padding: 24rpx;
	}
</style>
